﻿<!doctype html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>技术部门</title>
<style>
/* CSS Document */

body{ max-width:720px; margin:0 auto; background:#c04547}

*{ padding:0; margin:0; font-size:100%; font-family:"微软雅黑";}
a{ text-decoration:none}
ul li{ list-style:none}
.clear{ clear:both}
img{ border:none; display:block;}

/****mainCss***/
.pneal{ width:100%;padding:0.3em 0}
.pneal:after{ content:""; clear:both; float:none}
.pneal .pneals{ width:46%; float:left; box-sizing:border-box; margin:0 2%; background:#e74c3c ; border-radius:5px;}
.pneal .pneals:nth-child(1) a{ box-sizing:border-box;}
.pneal .pneals a{ font-size:0.75em; text-align:center; color:#fff; display:block; width:100%; height:3em; line-height:3em; font-weight:bold}
 .pneal .active{ background:#9f322f; position:relative}
  .pneal .active:after{ content:""; position:absolute; display:block; width:0; height:0;   margin:auto; left:0; right:0;bottom:-10px;    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid #9f322f;}
.blist{ margin:0em 0 0.5em; padding:0.5em; box-sizing:border-box; background:#ecf0f5; border-radius:0 0 5px 5px}
.blistheader{ font-size:0.875em; background:#2d3e50; margin:0; padding:0.5em 5%; margin-top:0.4em ; border-radius:5px 5px 0 0; color:#fff;}
.pneanin{ padding:0 2%}
.blistin{ overflow:hidden;}
.blistin li{ float:left; width:16%; margin:0.4em 2% ; background:#ff8981; border-radius:100px;}
.blistin li a{ font-size:0.75em; text-align:center; color:#fff; display:block; width:100%; height:100%; height:2em; line-height:2em;}
 .blistin .sactive{ background:#e74c3c }

 .bigboxin{ float:left; width:48%; height:7em; background:#f6c20e; margin-right:4%; margin-bottom:0.625em; border-radius:0 0 5px 5px; position:relative}
 .bigboxin:nth-child(2n){ margin-right:0;}
 .bigboxh{ background:#f39c11; font-size:0.875em; color:#fff; text-align:center; line-height:2em;}
 .boxb{ font-size:1.5em; color:#fff; font-weight:bold; text-align:center}
 .Green { background:#1abc9c !important}
 .Green .bigboxh{ background:#16a085}
 .Belize{ background:#3498db !important}
 .fen{ background:#f9649c !important}
 .fen .bigboxh{ background:#d25786}
 .lv{ background:#9bcf50 !important;}
 .lv .bigboxh{ background:#81ae45}
 .Belize .bigboxh{ background:#2980b9}
 .Amethyst{ background:#9b59b6 !important}
  .Amethyst .bigboxh{ background:#8e44ad}
  .boxbtn{ text-align:center;}
  .boxbtn input{ color:#fff; font-size:0.875em; text-align:center; height:2em; width:50%; margin-top:0.75em; background:#2c3e50; border:none; border-radius:5px;}
 
.alertbox{ position: absolute; width:100%; height:2em; background:rgba(44,64,80,0.6); border-radius:5px 5px 0 0; margin:auto; top:-2em; left:0; right:0; transform-origin:center bottom; transform:scaleY(0); -webkit-transform-origin:center bottom; -webkit-transform:scaleY(0);}
.thua{ animation:shangtan 0.5s linear forwards; -webkit-animation:shangtan 0.5s linear forwards;}
.box-text{ color:rgba(255,255,255,0.8); text-align:center; font-size:0.75em; line-height:2.3em;}
@keyframes shangtan{
0%{ transform:scaleY(0)}
50%{ transform:scaleY(1)}
80%{ transform:scaleY(0.8)}
100%{ transform:scaleY(1)}
}
@-webkit-keyframes shangtan{
0%{ -webkit-transform:scaleY(0)}
50%{ -webkit-transform:scaleY(1)}
80%{ -webkit-transform:scaleY(0.8)}
100%{ -webkit-transform:scaleY(1)}
}
/******response***********/
@media only screen and (max-width:540px){
body{ font-size:168.5%;}

}
@media only screen and (max-width:480px){
body{ font-size:150%;}

}
@media only screen and (max-width:400px){
body{ font-size:125%;}

}
@media only screen and (max-width:360px){
body{ font-size:112.5%;}

}
@media only screen and (max-width:320px){
body{ font-size:100%;}

}
</style>
<script src="/js/jquery.min.js" type="text/javascript"></script>
</head>

<body>

<div class="pneal">
	<div class="pneals active"><a href="#">技术</a></div>
	<div class="pneals"><a href="#">部门</a></div>
	<div class="clear"></div>
</div>

<div class="pneanin dome1">
	<div class="blistheader">部门</div>
	<div class="blist">
		
		<ul class="blistin">
			<li class="sactive"><a href="#">销售</a></li>
			<li><a href="#">技术</a></li>
			<li><a href="#">优化</a></li>
			<li><a href="#">行政</a></li>
			<li><a href="#">财务</a></li>
			<li><a href="#">人事</a></li>
			<li><a href="#">销售</a></li>
			<li><a href="#">销售</a></li>
			<li><a href="#">销售</a></li>
			<li><a href="#">销售</a></li>
		</ul>
	</div>
	<div class="listopen">
		<div class="listopenin">
			<div class="bigbox">
				<div class="bigboxin">
					<div class="bigboxh">张三</div>
					<div class="boxb">50%</div>
					<div class="boxbtn"><input type="button" value="支持"></div>
					<div class="alertbox">
						<div class="box-text ">评价成功</div>
					</div>
				</div>
				<div class="bigboxin Green">
					<div class="bigboxh">李四</div>
					<div class="boxb">50%</div>
					 <div class="boxbtn"><input type="button" value="支持"></div>
					 <div class="alertbox">
						<div class="box-text ">评价成功</div>
					</div>
				</div>
				<div class="bigboxin Amethyst">
					<div class="bigboxh">小明</div>
					<div class="boxb">50%</div>
					 <div class="boxbtn"><input type="button" value="支持"></div>
					 <div class="alertbox">
						<div class="box-text ">评价成功</div>
					</div>
				</div>
				<div class="bigboxin Belize">
					<div class="bigboxh">小红</div>
					<div class="boxb">50%</div>
					 <div class="boxbtn"><input type="button" value="支持"></div>
					 <div class="alertbox">
						<div class="box-text ">评价成功</div>
					</div>
				</div>
				<div class="bigboxin lv">
					<div class="bigboxh">小亮</div>
					<div class="boxb">50%</div>
					 <div class="boxbtn"><input type="button" value="支持"></div>
					 <div class="alertbox">
						<div class="box-text ">评价成功</div>
					</div>
				</div>
				<div class="bigboxin fen">
					<div class="bigboxh">丁武</div>
					<div class="boxb">50%</div>
					 <div class="boxbtn"><input type="button" value="支持"></div>
					 <div class="alertbox">
						<div class="box-text ">评价成功</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(".boxbtn").each(function(index) {
	$(".boxbtn").eq(index).find("input").click(function(){
		$(".alertbox").eq(index).addClass("thua");
		setTimeout(function(){
			$(".alertbox").eq(index).removeClass("thua");;
		},1500)
	})
});
</script>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
